Créer et utiliser une animation CSS
Il est possible en CSS de créer des animations qui se dérouleront en plusieurs étapes. Dans chaque étape, on peut lister toutes les propriétés qui changeront de valeurs par rapport à l'état initial de l'élément.
Exemple ci dessous d'une animation sur un carré, permettant de le faire changer de couleur et d'emplacement en 5 étapes (matérialisées par des pourcentages) :
<div class="target"></div>
.target {
/* L'élément sera un carré violet par défaut au chargement de la page */
width: 100px;
height: 100px;
background-color: purple;
position: relative;
/* Cet élément sera animé par l'animation "example" (créée en dessous) */
animation-name: example;
/* Durée de l'animation */
animation-duration: 4s;
/* Temps avant le premier lancement de l'animation */
animation-delay: 1s;
/* Nombre de fois que l'animation se fera d'affilé */
animation-iteration-count: infinite;
/* Dans quel sens les étapes de l'animation se dérouleront */
animation-direction: normal;
/* Courbe d'accéleration de l'animation */
animation-timing-function: linear;
}
/* Création de l'animation */
@keyframes example {
/* État de l'élément au début de l'animation */
0% {
background-color: purple;
left: 0;
top: 0;
}
/* État de l'élément à 25% de l'animation */
25% {
background-color: yellow;
left: 100px;
top: 0;
}
/* État de l'élément à 50% de l'animation */
50% {
background-color: blue;
left: 100px;
top: 100px;
}
/* État de l'élément à 75% de l'animation */
75% {
background-color: green;
left: 0;
top: 100px;
}
/* État de l'élément à la fin de l'animation */
100% {
background-color: purple;
left: 0;
top: 0;
}
}
Résultat de cette animation :